<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			let colors=[]
			function sel(){
				let xhr=new XMLHttpRequest()  //**  
				//2.创建请求
				xhr.open("GET","colors.xml",true)//true表示异步请求
				//3.发送请求
				xhr.send()  //**
				//4.接收,解析,显示数据
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&&xhr.status==200){
						let data=xhr.responseXML
						colors=data.querySelectorAll("color")
						let select=document.querySelector("select")
						for (let i = 0; i < colors.length; i++) {
							select.options[i]=new Option(colors[i].querySelector("name").innerHTML)  //第i个colors
						}
						let c=colors[0].querySelector("value").innerHTML
						document.body.setAttribute("style","background-color:"+c+";")
					}
				}
			}
			function fun(){
				let select=document.querySelector("select")
				let index=select.selectedIndex //表示选中的选项索引
				let c=colors[index].querySelector("value").innerHTML
				document.body.setAttribute("style","background-color:"+c+";")
			}
		</script>
	</head>
	<body onload="sel()">
		请选择网页背景颜色：<select onchange="fun()"></select>
	</body>
</html>
